<template>
  <el-button @click="openDemoDialog">打开弹窗</el-button>
  <KDialog v-model="visible" title="标题" width="600px" @submit="onClickSubmit" @cancel="onclickCancel">
    这里是测试内容这里是测试内容
  </KDialog>
  <el-button @click="openDemoDrawer">打开抽屉</el-button>
  <KDrawer v-model="drawerVisible" title="侧边抽屉" @submit="onClickSubmit" @cancel="onclickCancel">
    打开抽屉打开抽屉打开抽屉打开抽屉打开抽屉打开抽屉打开抽屉
  </KDrawer>
  <!-- ['fill', 'contain', 'cover', 'none', 'scale-down'] -->
  <el-image
    style="width: 100px; height: 100px;"
    src="https://cdn.kaogujia.com/f85c2b31fba7458dbc6d39366c936031"
    :zoom-rate="1.2"
    :preview-src-list="['https://cdn.kaogujia.com/f85c2b31fba7458dbc6d39366c936031']"
    fit="contain"
  />
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import { KDialog, KDrawer } from '@/components/k-dialog';
defineOptions({
  name: 'DemoDialog'
});
let visible = ref(false);
let drawerVisible = ref(false);
const openDemoDialog = () => {
  visible.value = true;
};
const onClickSubmit= (data: any) => {
  visible.value = false;
  drawerVisible.value = false;
};
const onclickCancel= (data: any) => {
  visible.value = false;
  drawerVisible.value = false;
};
const openDemoDrawer = () => {
  drawerVisible.value = true;
};

</script>
